<!-- 待处理二级弹框 -->
<template>
  <div class="mainPic" ref="drags2" @mousedown="moudedown">
    <div class="top">
      <div class="top_1">
        事件确认
        <!-- 图标 -->
        <div class="left_icon" @click="onClosePopus2_1()">
          <n-icon size="18px" color="#fff">
            <CloseSharp></CloseSharp>
          </n-icon>
        </div>
      </div>
    </div>
    <!-- 表单 -->
    <div class="formStyle" @mousedown.stop="">
      <n-form ref="formRef" :model="formValue" :rules="rules" label-placement="left" label-width="auto"
        require-mark-placement="right-hanging" :size="size">
        <n-form-item label="处理结果" path="user.policeType">
          <!-- <n-input v-model:value="formValue.user.name" placeholder="请输入" /> -->
          <n-select v-model:value="formValue.user.policeType" :options="generalOptions" placeholder="请选择" />
        </n-form-item>
      </n-form>
    </div>
    <!-- 上传图片 -->
    <div class="uploadPic">
      上传图片:
    </div>
    <div class="upload" @mousedown.stop="">
      <n-upload action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f" :default-file-list="previewFileList"
        list-type="image-card" @preview="handlePreview" />
      <n-modal v-model:show="showModalRef" preset="card" style="width: 600px" title="一张很酷的图片">
        <img :src="previewImageUrl" style="width: 100%">
      </n-modal>
    </div>
    <!-- 按钮 -->
    <div class="buttom" @mousedown.stop="">
      <button class="buttom_1" @click="onClosePopus2_1()">取消</button>
      <button class="buttom_2" @click="onClosePopus2_1()">保存</button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue"
import { CloseSharp } from "@vicons/ionicons5";
const generalOptions = [{ label: 'A类', value: 'groode' }, { label: 'B类', value: 'groode' }, { label: 'C类', value: 'groode' }]

const drags2 = ref()
const size = ref("small")

const emit = defineEmits(['closePopus2_1'])

let formValue = ref({
  user: {
    // 编号
    policenumber: "",
    name: "",
    // 标题
    age: "",
    policeTitle: "",
    // 类型
    // selectValue: null,
    policeType: null,
    // 内容
    policeContent: null,
    // 区域
    policeArea: null,
    // 点位
    policePoint: null,
    // 等级 
    policeGrade: null,
    // 姓名
    policeName: "",
    // 电话
    policePhone: "",
  },
  phone: ""
});

// 验证规则
let rules = {
  user: {
    policenumber: {
      required: true,
      message: "请输入报警编号",
      trigger: "blur"
    },
    policeTitle: {
      required: true,
      message: "请输入报警标题",
      trigger: "blur"
    },
    policeType: {
      required: true,
      message: "请输入报警类型",
      trigger: "blur"
    },
    policeContent: {
      required: true,
      message: "请输入报警内容",
      trigger: "blur"
    },
    policeArea: {
      required: true,
      message: "请输入所属区域",
      trigger: "blur"
    },
    policePoint: {
      required: true,
      message: "请输入所属点位",
      trigger: "blur"
    },
    policeGrade: {
      required: true,
      message: "请输入报警等级",
      trigger: "blur"
    },
    policeName: {
      required: true,
      message: "请输入报警人姓名",
      trigger: "blur"
    },
    policePhone: {
      required: true,
      message: "请输入报警人电话",
      trigger: "blur",
      // type: "number"
    },
  },

};


const previewImageUrlRef = ref("");
let previewImageUrl = ref()
const showModalRef = ref(false);
// 上传图片
let previewFileList = ref([
  {
    id: "react",
    name: "我是react.png",
    status: "finished",
    url: "https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
  },
  {
    id: "vue",
    name: "我是vue.png",
    status: "finished",
    url: "https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
  }
])

function handlePreview(file) {
  const { url } = file;
  previewImageUrlRef.value = url;
  previewImageUrl.value = previewImageUrlRef.value
  showModalRef.value = true;
}

/**
 * 鼠标拖动事件
 */
const moudedown = (ev: any) => {
  console.log('ev', ev)
  let e = ev || event;
  let x = e.clientX - drags2.value.offsetLeft; //鼠标点击坐标距离盒子左边缘的距离
  let y = e.clientY - drags2.value.offsetTop; //鼠标点击坐标距离盒子上边缘的距离

  document.onmousemove = function (ev) {
    let e = ev || event;
    drags2.value.style.left = ev.clientX - x + 'px';
    drags2.value.style.top = ev.clientY - y + 'px';

    let bodyScreenX = ev.screenX
    let bodyClientWidth = document.body.clientWidth

    document.onmouseup = function (ev) {
      if (ev.clientX - x < 0) {
        drags2.value.style.left = 0
      } else if (bodyScreenX > bodyClientWidth) {
        drags2.value.style.right = 0
        drags2.value.style.left = bodyClientWidth - 100 + 'px'
      }
      document.onmousemove = null;
      document.onmouseup = null;
    }
  }
}

/**
 * 关闭弹窗
 */
const onClosePopus2_1 = ()=>{
  emit("closePopus2_1")
}
</script>

<style lang="scss" scoped>
.mainPic {
  position: absolute;
  width: 350px;
  transform: translateX(450px);
  z-index: 17;
  background-image: url("../../assets/border/Group4900.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  padding: 10px 10px;

  .top {

    // border: 1px solid red;
    .top_1 {
      // font-size: ;
      color: #fff;
      // border: 1px solid rgb(45, 12, 12);
      font-weight: bold;
      position: relative;

      .left_icon {
        // border: 1px solid red;
        position: absolute;
        right: 0;
        top: 2px;
        height: 20px;
        margin: 0;
        padding: 0;
        cursor: pointer;
      }
    }
  }

  .formStyle {
    margin-top: 20px;
    // border: 1px solid red;
    width: 100%;
  }

  .uploadPic {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    margin-bottom: 5px;
    font-family: PingFang SC-Semibold, PingFang SC;

  }

  .upload {
    width: 100%;
    // margin-top: 20px;
  }

  .buttom {
    margin-top: 15px;
    display: flex;
    justify-content: center;

    .buttom_1 {
      cursor: pointer;
      outline: none;
      border: none;
      border-radius: 5px;
      padding: 5px 30px;
      color: #fff;
      font-size: 13px;
      // background-color: #3f91e5;
      margin-right: 5px;
      background-image: url("../../assets/border/Group3037.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    .buttom_2 {
      cursor: pointer;
      outline: none;
      border: none;
      border-radius: 5px;
      padding: 5px 30px;
      color: #fff;
      font-size: 13px;
      // background-color: #3f91e5;
      // background-image: url("../../assets/border/Group3037.png");
      background-image: url("../../assets/border/Group3038.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      margin-left: 5px;
    }
  }
}
</style>